<template>
	<view class="content ">
		<view class="mainpadding">
			<!-- tab栏 -->
			<view class="mainpadding ffffff border">
				<view class="flexbetween">
					<!-- <view :class="type==0?'tabBar active':'tabBar'" @click="type=0">
						帮我送
					</view> -->
					<!-- <view :class="type==1?'tabBar active':'tabBar'" @click="type=1">
						帮我买
					</view> -->
				</view>
				<view class="mainpadding fafafa border2 flexbetween" @click="selectAddress(1)" v-show="type==0">
					<view class="flexleft">
						<image class="fromImg margin_right2" src="/static/images/runErrands/from.png" mode=""></image>
						<view class="" v-if="!to_address">
							<view class="color_ling text_g">請選擇取貨地址</view>
						</view>
						<view class="" v-else>
							<view class="color_ling text_g">{{to_name}}  {{to_phone}}</view>
							<view class="color_ling text_g">{{to_address}}</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
				<view class="line margin_top" v-show="type==0"></view>
				<view class="margin_top mainpadding fafafa border2 flexbetween" @click="selectAddress(2)">
					<view class="flexleft">
						<image class="fromImg margin_right2" src="/static/images/runErrands/to.png" mode=""></image>
						<view class="" v-if="!go_address">
							<view class="color_ling text_g">請選擇到達地址</view>
						</view>
						<view class="" v-else>
							<view class="color_ling text_g">{{go_name}}  {{go_phone}}</view>
							<view class="color_ling text_g">{{go_address}}</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="mainpadding ffffff border2 margin_top flexbetween">
				<view class="text_a color_ling margin_right3">預估墊付</view>
				<input class="text_a textright flex1" type="number" placeholder="請輸入預估金額" v-model="df_money">
			</view>
			<!-- 商品信息 -->
			<view class="paddinglr ffffff border2 margin_top">
				<view class="paddingtb flexbetween line">
					<view class="text_a color_ling margin_right3">物品重量（kg）</view>
					<input class="text_a textright flex1" type="digit" placeholder="請輸入物品重量" v-model="goods_kg">
				</view>
				<view class="paddingtb flexbetween line">
					<view class="text_a color_ling margin_right3">基本費用</view>
					<view class="color_theme text_a">${{j_money}}</view>
				</view>
				<view class="paddingtb flexbetween line">
					<view class="text_a color_ling margin_right3">運送費用</view>
					<view class="color_theme text_a">${{y_money}}</view>
				</view>
				<view class="paddingtb line">
					<view class="flexbetween">
						<view class="text_a color_ling margin_right3">商品尺寸（cm）</view>
						<view class="color_theme text_a">{{goods_cm}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="sizeBox flexcenter">
							<view class="color_six text_b">長：</view>
							<input class="color_theme text_b" type="digit" v-model="chang">
						</view>
						<view class="sizeBox flexcenter">
							<view class="color_six text_b">寬：</view>
							<input class="color_theme text_b" type="digit" v-model="kuan">
						</view>
						<view class="sizeBox flexcenter">
							<view class="color_six text_b">高：</view>
							<input class="color_theme text_b" type="digit" v-model="gao">
						</view>
					</view>
					<view class="margin_top text_a color_red" v-if="goods_cm > 150">
						注意：最長尺寸不可超過150cm
					</view>
				</view>
				<view class="paddingtb">
					<view class="text_a color_ling margin_right3">備注</view>
					<textarea class="text_a margin_top2" style="height: 180rpx;" cols="10" rows="5"
						placeholder="選填" v-model="bei"></textarea>
				</view>
			</view>
			<!-- 貨物圖片 -->
			<view class="mainpadding ffffff border margin_top">
				<view class="color_ling text_w margin_right3">貨物圖片</view>
				<view class="flexleft flex_wrap">
					<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_arr" :key="index">
						<!-- 已上傳 -->
						<view class="listleftimg1 radius">
							<image class="radius" :src="item" mode=""></image>
							<view class="deleteimg" @click="delindex(index,images,images_arr)"></view>
						</view>
					</view>
					<view class="itemimgBox flexcenter margin_top2" @click="uploadImg(4,images,images_arr)"
						v-if="images.length<4"><!-- 未上傳 -->
						<image class="listleftimg1 radius" src="@/static/images/mine/noImage.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- <view class="mainpadding flexbetween margin_top ffffff border2">
				<view class="text_a color_ling margin_right3">免運券</view>
				<view class="flexleft">
					<view class="text_a color_six margin_right1">請選擇</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view> -->
			<!-- 底部 -->
			<view class="footerBox">
				<view class="footerPirce flexbetween">
					<view class="paddingtb padding_left3">
						<text class="color_ling text_d margin_right1">合計</text>
						<text class="totalPrice margin_right1">$</text>
						<text class="totalPrice" style="font-size: 36rpx;">{{Number(y_money) + Number(j_money)}}</text>
					</view>
					<!-- 跑腿訂單不能使用多元支付 -->
					<view class="settlement" @click="submit()">提交訂單</view>
				</view>
			</view>
		</view>
		
		<tabbar ref="tabbarref" :current="1"></tabbar>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				to_name: "",
				to_latitude: "",
				to_longitude: "",
				to_address: "",
				to_phone: "",
				go_name: "",
				go_latitude: "",
				go_longitude: "",
				go_address: "",
				go_phone: "",
				type: 0, //0帮我送 1帮我买
				goods_kg: "",
				j_money: 0,
				y_money: 0,
				df_money: "",
				chang: "",
				kuan: "",
				gao: "",
				bei: "",
				images: [],
				images_arr: [],
				selectaddresstype: 1, //1選擇發貨地，2選擇收貨地
				cgje: 0,
				bishu: false,
			}
		},
		computed: {
			goods_cm() {
				if (this.chang && this.kuan && this.gao) {
					this.bishu = false
					return Math.ceil(this.chang * this.kuan * this.gao / 27000)
				} else if (this.chang && this.kuan && !this.gao) {
					this.bishu = false
					return Math.ceil(this.chang * this.kuan / 900)
				} else if (this.chang && !this.kuan && !this.gao) {
					this.bishu = false
					return Math.ceil(this.chang / 30)
				} else if (!this.chang && !this.kuan && !this.gao) {
					this.bishu = false
					return
				} else {
					this.bishu = true
					return
				}
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.getjbj()
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.tabbarref.init()
			});
			let that = this
			uni.$off("selectAddressFn")
			uni.$on("selectAddressFn", data => {
				console.log(data, );
				if (that.selectaddresstype == 1) {
					this.to_name = data.name
					this.to_phone = data.phone
					this.to_latitude = data.latitude
					this.to_longitude = data.longitude
					this.to_address = data.addre + data.address
				} else {
					this.go_name = data.name
					this.go_phone = data.phone
					this.go_latitude = data.latitude
					this.go_longitude = data.longitude
					this.go_address = data.addre + data.address
				}
			})
		},
		watch: {
			go_latitude(newval) {
				if (this.to_latitude == "") {
					return false
				} else {
					this.ysfyjs()
				}
			},
			to_latitude(newval) {
				if (this.go_latitude == "") {
					return false
				} else {
					this.ysfyjs()
				}
			},
		},
		methods: {
			ysfyjs() {
				let zgl = this.GetDistance()
				let allprice = (Number(zgl) - 1) * this.cgje
				this.y_money = Number(allprice).toFixed(0)
			},
			GetDistance() {
				var radLat1 = this.to_latitude * Math.PI / 180.0;
				var radLat2 = this.go_latitude * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = this.to_longitude * Math.PI / 180.0 - this.go_longitude * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				console.log(this.to_latitude, this.to_longitude);
				console.log(this.go_latitude, this.go_longitude);
				console.log(s, 999);
				return s;
			},
			selectAddress(val) { //選擇地址
			if (!httpRequest.checkIsLogin()) {
				uni.navigateTo({
					url: "/pages/login/login"
				})
				return false
			}
				this.selectaddresstype = val
				uni.navigateTo({
					url: "/pages_mine/takeAddress?type=1"
				})
			},
			getjbj() { //獲取基本價
				this.http.request('/api/index/getJcyf', 'POST', {}).then(res => {
					this.j_money = Number(res.data.jcyf)
					this.cgje = Number(res.data.cgje)
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上傳圖片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['照機', '相簿'],
					success: function(res) {
						// 選擇照機走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 選擇相簿走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
			submit() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if (this.to_address == "") {
					this.http.toast("請選擇取貨地址")
					return false
				}
				if (this.go_address == "") {
					this.http.toast("請選擇取貨地址")
					return false
				}
				if (this.bishu) {
					this.http.toast("請将商品尺寸信息補全")
					return false
				}
				if (Number(this.goods_cm) > 150) {
					this.http.toast("最長尺寸不可超過150cm")
					return false
				}
				let data = {
					to_name: this.to_name,
					to_address: this.to_address,
					to_phone: this.to_phone,
					go_name: this.go_name,
					go_address: this.go_address,
					go_phone: this.go_phone,
					type: this.type,
					goods_kg: this.goods_kg,
					goods_cm: this.goods_cm,
					j_money: this.j_money,
					y_money: this.y_money,
					df_money: this.df_money,
					chang: this.chang,
					kuan: this.kuan,
					gao: this.gao,
					bei: this.bei,
					images: this.images.join(),
					z_money: Number(this.j_money) + Number(this.y_money)
				}
				this.http.request('/api/Orderrun/addOrderrun', 'POST', data).then(res => {
					if(res.code == -1){
						this.http.toast(res.msg)
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages_mine/personInformation"
							})
						},1000)
						return false
					}
					if (res.code == 1) {
						this.reset()
						let data1 = {
							id: res.data,
							paymoney: data.z_money,
							order_type: 5,
							dyzf: 1
						}
						uni.navigateTo({
							url: "/pages_index/payment?msg=" + encodeURIComponent(JSON.stringify(data1))
						})
					}
				})
			},
			reset(){
				this.to_name = ""
				this.to_latitude = ""
				this.to_longitude = ""
				this.to_address = ""
				this.to_phone = ""
				this.go_name = ""
				this.go_latitude = ""
				this.go_longitude = ""
				this.go_address = ""
				this.go_phone = ""
				this.type = 0 //0帮我送 1帮我买
				this.goods_kg = ""
				this.j_money = 0
				this.y_money = 0
				this.df_money = ""
				this.chang = ""
				this.kuan = ""
				this.gao = ""
				this.bei = ""
				this.images = []
				this.images_arr = []
				this.selectaddresstype = 1 //1選擇發貨地，2選擇收貨地
				this.cgje = 0
				this.bishu = false
			},
			// 跑腿訂單不能使用多元支付
			payment() {
				uni.navigateTo({
					url: "/pages_index/payment"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 200rpx;
	}

	.tabBar {
		width: 50%;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.active {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		position: relative;
	}

	.active::after {
		content: '';
		width: 51rpx;
		height: 8rpx;
		background: #FFB800;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		position: absolute;
		bottom: -20rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.fromImg {
		width: 40rpx;
		min-width: 40rpx;
		height: 40rpx;
	}

	.line {
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.03);
	}

	.color_theme {
		color: #FF5C00;
	}
.listleftimg1{
		width: 120rpx;
		height: 120rpx;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.sizeBox {
		width: 201rpx;
		height: 69rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #D1D1D1;

		input {
			width: 100rpx !important;
		}
	}

	// 底部
	.footerBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 140rpx;

		.footerPirce {
			// width: 708rpx;
			height: 101rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 53rpx 53rpx 53rpx 53rpx;
		}

		.totalPrice {
			font-size: 26rpx;
			font-family: DIN Next LT Pro-Medium;
			font-weight: 500;
			color: rgba(253, 70, 62, 1);
		}

		.settlement {
			width: 178rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FFB800;
			border-radius: 0rpx 53rpx 53rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>